<template>
	<view class="page">
		<view class="tops">
			各经销商销售排行（从高到低）
		</view>

		<view class="items" v-for="(items,index) in zhanBiData" :key="items.id">
			<view class="items_title" >
				{{items.name || ''}}
			</view>
			<u-line-progress :percentage="items.percentage * 100" :activeColor="changeBgc(index)"></u-line-progress>
		</view>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				zhanBiData:[]
			}
		},
		onLoad(optins) {
			this.getList()
		},
		methods: {
			async getList() {
			    //获取练习列表数据
			    const res = await this.$post(`/biz/distributorStatistics/xiaoshouzhanbi`, {
			     isAll:0
			    })
			    if (res.statusCode == 200) {
			     
			     this.zhanBiData = res.data.data
			    }
			   },
			changeBgc(val) {
				var bgc = ''
				if (val == 0) {
					bgc = '#F89751'
				} else if(val == 1) {
					bgc = '#FB5951'
				}else if (val == 2) {
					bgc = '#31AB3F'
				} else if (val == 3) {
					bgc = '#FB5951'
				} else if (val == 4) {
					bgc = '#361B32'
				} else if (val == 5) {
					bgc = '#6947DE'
				}  else if (val == 6) {
					bgc = '#F89751'
				}  else if (val == 7) {
					bgc = '#31AB3F'
				}  else if (val == 8) {
					bgc = '#6947DE'
				}  else if (val == 9) {
					bgc = '#FB5951'
				} else {
					// 默认色
					bgc = '#FB5951'
				}
				return bgc
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 26rpx;
	}

	.tops {
		width: 706rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #333333;
		line-height: 33rpx;
		margin: 30rpx auto 44rpx;
	}

	.items {
		width: 652rpx;
		margin: 0 auto 35rpx;
		/* background-color: red; */
	}

	.items_title {
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Medium, PingFang SC';
		font-weight: 500;
		color: #333333;
		line-height: 33rpx;
		margin-bottom: 17rpx;
	}

	.chengSe {
		background-color: #F89751;
	}

	.lvSe {
		background-color: #31AB3F;
	}

	.hongSe {
		background-color: #FB5951;
	}

	.heiSe {
		background-color: #361B32;
	}

	.ziSe {
		background-color: #6947DE;
	}
</style>